{% extends "base.html" %}
{% block title %}{{ landmark.name }}{% endblock %}

{% block content-sidebar %}
  <h2>Resources</h2>
  <ul>
    <li><a href="{{ landmark.target_url }}">Full Article</a></li>
    <li><a href="{% url landmark-plaque pk=landmark.slug %}">Plaque Artwork</a></li>
  </ul>

  {% include "bookmarks/LandmarkTagList.html" with landmarktags=landmark.landmarktag_set %}
{% endblock %}

{% block content %}
  <div class="landmarkImage">
    <img alt="{{landmark.name}} Image" src="{{ landmark.image.url }}"/><br/>
  </div>
  <h1>{{ landmark.name }}</h1>

  <h2>Description</h2>
  {{ landmark.content|safe }}

  <p class="bookmarks_read_more">
    <a href="{{ landmark.target_url }}">read more...</a>
  </p>

  <div class="bookmarks_small_map">
    <h2>Map</h2>
    <div id="map_canvas"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;key={{MAP_API_KEY}}"></script>
    <script type="text/javascript">
      var loc = new google.maps.LatLng({{ landmark.location }});
      var map = new google.maps.Map(document.getElementById("map_canvas"), {
          zoom: 14,
          center: loc,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
      });
      var marker = new google.maps.Marker({
          position: loc,
          map: map,
          title: "{{ landmark.name }}",
      });
    </script>
  </div>
{% endblock %}
